<template>
    <div class="search-box" :style="{ background: data.style.background }">
        <div
            class="search-item"
            :style="{
                borderRadius: `${data.style['shape'] == 'round' ? '999px' : '3px'}`,
                background: data.style.box_bg,
            }"
        >
            <el-icon color="#323233"><Search /></el-icon>
            <el-input readonly :placeholder="data.style.placeholder" :input-style="{ textAlign: data.style.aligen }" />
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue"
import { Search } from "@element-plus/icons-vue"

const { proxy } = getCurrentInstance()

/**
 * 商品搜索
 * @property {Object} data  数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 8,
            type_name: "search",
            text: "商品搜索",
            style: {
                background: "#fff", // 背景颜色
                shape: "round", // 框体样式，可选值square
                aligen: "left", // 输入框内容对齐方式，可选值为 center right
            },
            data: {
                /**请求地址*/
                reqUrl: "",
                /**请求参数*/
                reqData: {},
            },
        },
    },
})
</script>

<style lang="less" scoped>
.search-box {
    padding: 9px 14px;
    .search-item {
        display: flex;
        align-items: center;
        padding: 2px 12px;

        .el-icon {
            margin-right: 4px;
            flex: none;
        }
        .el-input {
            display: block;
            box-sizing: border-box;
            flex: 1;
            text-align: left;
            background-color: transparent;
            border: 0;
            resize: none;
            :deep(.el-input__wrapper) {
                box-shadow: 0 0 0 0;
                width: 100%;
                padding: 0px 11px 0px 4px;
                background: none;
            }
        }
    }
}
</style>
